<template>
    <div class="page-orderList">
      <!-- 顶部导航栏 -->
      <NavBar navbarTitle="订单列表"></NavBar>
      <div class="orderList-content">
        <!-- 订单状态导航区 -->
        <div class="nav-orderState">
            <div class="stateBox">
                <div :class="navState === 0 ? 'orderState-item active' : 'orderState-item'" @click="navChange(0)">
                    <span class="item-title">全部</span>
                </div>
                <div :class="navState === 1 ? 'orderState-item active' : 'orderState-item'" @click="navChange(1)">
                    <span class="item-title">待付款</span>
                </div>
                <div :class="navState === 2 ? 'orderState-item active' : 'orderState-item'" @click="navChange(2)">
                    <span class="item-title">待发货</span>
                </div>
                <div :class="navState === 3 ? 'orderState-item active' : 'orderState-item'" @click="navChange(3)">
                    <span class="item-title">待收货</span>
                </div>
                <div :class="navState === 4 ? 'orderState-item active' : 'orderState-item'" @click="navChange(4)">
                    <span class="item-title">待评价</span>
                </div>
                <div :class="navState === 5 ? 'orderState-item active' : 'orderState-item'" @click="navChange(5)">
                    <span class="item-title">退款/售后</span>
                </div>
            </div>
        </div>
        <!-- 订单列表项 -->
        <div class="content-list" v-if="orderList.length > 0">
            <div class="list-item" v-for="item,index in orderList" :key="index">
                <div class="item-info" @click="goDetail_btn(item.orderId)">
                    <div class="info-top">
                        <span class="top-time">{{ item.createTime }}</span>
                        <span class="top-state">{{ item.orderState }}</span>
                    </div>
                    <div class="info-center">
                        <img :src="item.productInfo.commodityImgs.split(',')[0]" alt="" class="center-img">
                        <div class="center-info">
                            <span class="info-productName">{{ item.productInfo.commodityName }}</span>
                            <div class="info-productAttr">
                                <span class="attr-item">{{ item.productStandardInfo.commodityAttr }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-bottom">
                        <span class="botton-tip">共{{ item.commodityCount }}件商品 总价￥{{ item.orderTotalPrice.toFixed(2) }}</span>
                    </div>
                </div>
                <div class="item-btns">
                    <van-button v-if="item.orderState === '未支付'" type="default" size="small" class="btn" @click="goPay_btn(item)">去支付</van-button>
                    <van-button v-if="item.orderState === '未支付' || item.orderState === '已支付' || item.orderState === '待发货' || item.orderState === '运输中'" type="default" size="small" class="btn" @click="cancel_btn(item.orderId)">取消订单</van-button>
                    <van-button v-if="item.orderState === '运输中'" type="default" size="small" class="btn" @click="confirm_receipt_btn(item.orderId)">确认收货</van-button>
                    <van-button v-if="item.orderState === '已收货'" type="default" size="small" class="btn" @click="evaluate_btn(item.orderId)">去评价</van-button>
                    <van-button type="default" size="small" class="btn" @click="delete_btn(item.orderId)">删除订单</van-button>
                    <van-button type="default" size="small" class="btn" @click="content_service_btn(item.orderId)">联系客服</van-button>
                </div>
            </div>
        </div>
        <div class="content-list no-list" v-else>
            <span class="tip">没有订单信息哦~</span>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
//引入vue
import { ref, onMounted } from "vue";
//引入组件
import NavBar from '@/components/NavBar/NavBar.vue';
//引入vant4
import { Button as VanButton, showToast, showSuccessToast, showConfirmDialog, showLoadingToast } from "vant";
//引入userStore
import { useUserStore } from "@/store/userStore";
const userStore = useUserStore();
//@ts-ignore引入请求函数
import { reqUserAllProductList, reqProductOrderListByUserIdAndOrderState, reqUpdateProductOrder, reqDeleteProductOrder } from "@/api/order/index.ts";
//引入vue-router
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

//导航栏状态 0-全部 1-待付款 2-待发货 3-待收货 4-待评价
let navState = ref(0);
//订单数据信息
let orderList = ref([]);

//请求当前用户的所有订单列表数据
async function getUserAllOrderList () {
    //获取用户id
    let userId = userStore.userInfo.id || JSON.parse(localStorage.getItem("userInfo")).id;
    //发送请求
    let res = await reqUserAllProductList(userId);
    if(res.code === 200){
        orderList.value = res.result;
        showToast("订单数据获取成功!");
    }
    console.log('获取用户所有订单数据api',res);
}
//请求当前用户对应的相关状态下的订单数据
async function getProductOrderListByUserIdAndOrderState (orderState:string) {
    //获取用户id
    let userId = userStore.userInfo.id || JSON.parse(localStorage.getItem("userInfo")).id;
    //发送请求
    let res = await reqProductOrderListByUserIdAndOrderState(userId,orderState);
    if(res.code === 200){
        orderList.value = res.result;
        showToast("订单数据获取成功!");
    } else {
        orderList.value = [];
        showToast("没有相关订单数据!");
    }
    console.log('获取用户对应状态订单数据api',res);
}

//点击订单跳转到订单详情
const goDetail_btn = (orderId:string) => {
    router.push({path:"/orderDetail",query:{orderIds:orderId}});
}

//导航栏切换事件
const navChange = (state:number) => {
    switch (state) {
        case 0:
            navState.value = state;
            getUserAllOrderList();
            break;
        case 1:
            navState.value = state;
            getProductOrderListByUserIdAndOrderState("未支付");
            break;
        case 2:
            navState.value = state;
            getProductOrderListByUserIdAndOrderState("待发货");
            break;
        case 3:
            navState.value = state;
            getProductOrderListByUserIdAndOrderState("运输中");
            break;
        case 4:
            navState.value = state;
            getProductOrderListByUserIdAndOrderState("已收货");
            break;
        case 5:
            navState.value = state;
            getProductOrderListByUserIdAndOrderState("已退货");
            break;
        default:
            navState.value = 0;
            break;
    }
}

//去支付按钮
function goPay_btn (orderInfo:any) {
    showLoadingToast("加载中...");
    //延迟跳转到支付页
    setTimeout(()=>{
        router.push({path:"/payment",query:{orderIds:orderInfo.orderId,price:orderInfo.orderTotalPrice}});
    },800);
}
//取消订单按钮
async function cancel_btn (orderId:string) {
    showConfirmDialog({title: '提示',message:'确定取消订单吗?'})
    .then(async () => {
        // on confirm
        let res = await reqUpdateProductOrder({orderId,orderState:"已取消"});
        if(res.code === 200){
            //信息提示
            showToast("订单取消成功!");
            //重新请求用户所有的订单数据
            getUserAllOrderList();
        }
        console.log('修改订单信息api',res);
    })
    .catch(() => {
        // on cancel
        showToast("操作取消!");
    });
}
//确认收货按钮
function confirm_receipt_btn (orderId:string) {
    showConfirmDialog({title: '提示',message:'确定收到商品了吗?'})
    .then(async () => {
        // on confirm
        let res = await reqUpdateProductOrder({orderId,orderState:"已收货"});
        if(res.code === 200){
            //信息提示
            showToast("订单收货成功!");
            //重新请求用户所有的订单数据
            getUserAllOrderList();
        }
        console.log('修改订单信息api',res);
    })
    .catch(() => {
        // on cancel
        showToast("操作取消!");
    });
}
//去评价按钮
function evaluate_btn (orderId:string) {
    showToast("功能开发中,敬请期待...");
}
//删除订单按钮
function delete_btn (orderId:string) {
    showConfirmDialog({title: '提示',message:'确定删除该订单吗?'})
    .then(async () => {
        // on confirm
        let res = await reqDeleteProductOrder([orderId]);
        if(res.code === 200){
            //信息提示
            showSuccessToast("订单删除成功!");
            //重新请求用户所有的订单数据
            getUserAllOrderList();
        }
        console.log('删除订单api',res);
    })
    .catch(() => {
        // on cancel
        showToast("操作取消!");
    });
}
//联系客服按钮
function content_service_btn (orderId:string){
    showToast("功能开发中,敬请期待...");
}

//vue生命周期
onMounted(() => {
    //获取路由参数,执行对应的函数
    let state = route.query.state;
    switch (state) {
        case undefined:
            navChange(0);
            break;
        case '待付款':
            navChange(1);
            break;
        case '待发货':
            navChange(2);
            break;
        case '待收货':
            navChange(3);
            break;
        case '待评价':
            navChange(4);
            break;
        case '售后':
            navChange(5);
            break;
        default:
            navChange(0);
            break;
    }
})
</script>

<style lang="less" scoped>
.page-orderList{
    width: 100%;
    .orderList-content{
        width: 375px;
        height: calc(100vh - 47px);
        position: relative;
        top:47px;
        background: #eff2f5;
        overflow: auto;
        /**订单状态导航区 */
        .nav-orderState{
            width: 375px;
            height: 45px;
            overflow-x: auto;
            // 隐藏滚动条
            &::-webkit-scrollbar{
                display: none;
            }
            .stateBox{
                width: 455px;
                height: 45px;
                display: flex; 
                justify-content: space-around;
                align-items: center;
                background: #fff;
            }
            .orderState-item{
                height: 45px;
                padding: 0 10px;
                box-sizing: border-box;
                font-size: 14px;
                line-height: 50px;
                color: #000;
                border-bottom: 2px solid transparent;
                cursor: pointer;
            }
            .active{
                color: #31bda0;
                border-bottom: 2px solid #31bda0;
            }
        }
        /**订单列表项 */
        .content-list{
            margin: 10px 0;
            width: 375px;
            .list-item{
                width: 360px;
                height: 200px;
                margin: 10px auto;
                padding: 10px 9px;
                box-sizing: border-box;
                background: #fff;
                border-radius: 5px;
                .item-info{
                    width: 100%;
                    height: 140px;
                    border-bottom: 1px solid #f1f1f1;
                    .info-top{
                        display: flex;
                        justify-content: space-between;
                        font-size: 14px;
                        color: #000;
                        .top-state{
                            color: #9195a3;
                        }
                    }
                    .info-center{
                        width: 100%;
                        margin: 12px 0;
                        display: flex;
                        align-items: center;
                        .center-img{
                            width: 80px;
                            height: 80px;
                            margin-right: 10px;
                        }
                        .center-info{
                            height: 80px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            .info-productName{
                                font-size: 14px;
                                color: #000;
                            }
                            .info-productAttr{
                                font-size: 12px;
                                .attr-item{
                                    padding: 2px 4px;
                                    background: #f7f7f8;
                                    color: #9195a3;
                                }
                            }
                        }
                    }
                    .info-bottom{
                        font-size: 12px;
                        color: #9195a3;
                        display: flex;
                        justify-content: flex-end;
                    }
                }
                .item-btns{
                    height: 50px;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    .btn{
                        margin: 0 3px;
                    }
                }   
            }
        }
        /**没有订单 */
        .no-list{
            width: 375px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
        }
    }
}
</style>